<template>
  <view class="authentication-list-page">
    <view class="avatar-box">
      <button
        class="avatar-box-button u-reset-button"
        open-type="chooseAvatar"
        @chooseavatar="onGetUserInfo"
      >
        <u-avatar :src="img_api + userInfo.avatar" size="240rpx"></u-avatar>
        <view class="change-avatar">
          <u-image
            width="56rpx"
            height="56rpx"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/change-avatar.png"
          ></u-image>
        </view>
      </button>
    </view>
    <view class="list-box">
      <view class="list" v-for="item in list" :key="item.key" @click="go(item)">
        <view class="left-box">{{ item.name }}</view>
        <view class="right-box" v-if="userInfo[item.authKey] == 0">
          <image
            class="icon-authenticated"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-authenticated.png"
          ></image>
        </view>
        <view class="right-box" v-else>
          <text class="username" v-if="item.key == 'nickName'">{{
            userInfo.nickName
          }}</text>
          <image
            class="icon-go"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-go1.png"
          ></image>
        </view>
      </view>
    </view>
    <view class="log-out-box" @click="logout"> 退出登录 </view>
  </view>
</template>

<script>
import { editAvatar, loginOut } from "@/config/api";
const api_url = process.env.VUE_APP_BASEURL_API;
export default {
  props: ["form"],
  data() {
    return {
      list: [
        {
          name: "昵称",
          key: "nickName",
          authKey: "nickName",
        },
        {
          name: "手机号验证",
          key: "phone",
          authKey: "phoneAuth",
        },
        {
          name: "实名认证",
          key: "card",
          authKey: "idcodeAuth",
        },
        {
          name: "人脸认证",
          key: "face",
          authKey: "faceAuth",
        },
      ],
    };
  },
  methods: {
    go(item) {
      if (this.userInfo[item.authKey] == 0) {
        return;
      }
      if (item.key === "face") {
        uni.showToast({ title: "暂无开放", icon: "none" });
        return;
      }
      if (item.key === "nickName") {
        this.toURL(`/page_my/personal/nickName`, {});
      }
      if (this.form) {
        this.toURL(
          `/page_my/authentication/${item.key}`,
          {},
          { type: "redirect" }
        );
      } else {
        this.toURL(`/page_my/authentication/${item.key}`);
      }
    },
    onGetUserInfo(e) {
      const _this = this;
      wx.uploadFile({
        url: api_url + "/file/uploadAttaData",
        filePath: e.detail.avatarUrl,
        header: {
          Authorization: "Bearer " + this.token,
        },
        name: "file",
        success(result) {
          const data = JSON.parse(result.data);
          if (data.code == 200) {
            const url = data.data.attaPath;
            editAvatar({
              userId: _this.userInfo.userId,
              userName: _this.userInfo.userName,
              avatar: url,
            }).then((res) => {
              if (res.code == 200) {
                _this.userInfo.avatar = url;
                uni.setStorageSync("X-UserInfo", _this.userInfo);
                _this.$store.dispatch("userInfo/onInit");
              }
            });
          } else {
            uni.hideLoading();
            uni.showToast({ title: data.msg || "上传失败", icon: "none" });
          }
        },
      });
    },
    logout() {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确定退出登录吗？",
        showCancel: true,
        success: function (res) {
          if (res.confirm) {
            loginOut().then((res) => {
              if (res.code == 200) {
                console.log("开始");
                uni.removeStorageSync("X-Token");
                uni.removeStorageSync("X-UserInfo");
                _this.$store.dispatch("userInfo/onInit");
                _this.toURL(`/pages/index/index`, {}, { type: "switch" });
                console.log("结束");
              } else {
                uni.showToast({ title: res.msg || "退出失败", icon: "none" });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.authentication-list-page {
  margin-top: 16rpx;
  .avatar-box {
    margin: 48rpx auto;
    .avatar-box-button {
      position: relative;
      background: transparent;
      width: 240rpx;
      margin: 0 auto;
      padding: 0;
    }
    .change-avatar {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .list-box {
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    height: 120rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  }

  .left-box {
    font-size: 28rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 40rpx;
  }

  .right-box {
    display: flex;
    align-items: center;
    .username {
      padding-right: 8rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      line-height: 40rpx;
    }
  }

  .icon-go {
    display: block;
    width: 32rpx;
    height: 32rpx;
  }

  .icon-authenticated {
    display: block;
    width: 172rpx;
    height: 56rpx;
  }

  .log-out-box {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 120rpx);
    border: 2rpx solid rgba(0, 0, 0, 0.1);
    height: 120rpx;
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 120rpx;
  }
}
</style>
